<template>
	<view class="resume-container">
		<view class="resume">
			<ul class="list">
				<li class="" v-for="(item, index) in resumeList" :key="item.id" @click="handleSelectResume(item.id)">
					<view class="content">
						<view class="icon">
							<image v-if="item.type === 'pdf'" src="../../static/img/pdf.png"></image>
							<image v-else src="../../static/img/word.png"></image>
						</view>
						<view class="info">
							<view class="name">{{ item.name }}</view>
							<text class="date">{{ $uv.timeFormat(item.createdAt) }}</text>
						</view>
					</view>
					<view class="delete" v-if="showIcon" @click.stop="handleRemoveResume(item.id, item.url)">
						<uv-icon name="trash" size="32"></uv-icon>
					</view>
				</li>
			</ul>
		</view>
		<view class="upload" @click="handleUploadResume"><button :disabled="loading">上传简历</button></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { getResumeList, createResume, removeResume } from '@/apis/student/resume.js';
import { getCredential, removeCosFile } from '@/apis/cos.js';
import { validateUploadFile, uploadFile } from '@/utils/index.js';

export default {
	data() {
		return {
			resumeList: [], // 简历列表
			showIcon: true,
			loading: false
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onLoad(option) {
		if (option.showIcon && option.showIcon === '0') {
			this.showIcon = false;
		}
	},
	mounted() {
		this.initData();
	},
	methods: {
		// 初始化数据
		async initData() {
			const res = await getResumeList(this.userInfo.id);
			this.resumeList = res.data;
		},
		// 选择简历
		handleSelectResume(id) {
			// TODO 这里得判断是从哪里来的，用户界面进来的就改成查看简历
			uni.$emit('select:resume', id);
			uni.navigateBack();
		},
		// 上传简历
		async handleUploadResume() {
			// if (this.resumeList.length >= 3) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '最多只能上传三份简历'
			// 	});
			// 	return;
			// }

			uni.chooseMessageFile({
				count: 1,
				extension: ['.doc', '.pdf', '.docx'],
				success: async file => {
					// 验证
					const valid = validateUploadFile(file.tempFiles[0]);
					if (!valid) return;

					this.loading = true;
					const { name, path } = file.tempFiles[0];
					const suffix = name.substr(name.lastIndexOf('.') + 1); // 获取文件后缀

					// 获取临时签名并上传文件
					const opt = await getCredential(suffix, 'resume');
					if (opt.code === 200) {
						const url = await uploadFile(opt.data, path);
						const res = await createResume(this.userInfo.id, {
							url,
							type: suffix,
							name: name.substr(0, name.lastIndexOf('.'))
						});
						if (res.code === 200) {
							this.resumeList.push(res.data);
						}
					}
					this.loading = false;
				},
				fail: err => {
					console.log(err);
					this.loading = false;
				}
			});
		},
		// 删除简历
		async handleRemoveResume(id, url) {
			uni.showModal({
				content: '确定删除该简历吗',
				success: async ({ confirm }) => {
					if (!confirm) return;
					const res = await removeResume(id);
					if (res.code === 200) {
						const index = this.resumeList.findIndex(item => item.id === id);
						this.resumeList.splice(index, 1);
						removeCosFile(url, 'resume');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.resume-container {
	padding: 20rpx;
	li {
		position: relative;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		.content {
			width: 100%;
			display: flex;
			align-items: center;
			.icon {
				margin: 0 20rpx;
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}
			.name {
				width: 400rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-bottom: 8rpx;
				font-size: 32rpx;
			}
			text {
				color: #999;
			}
		}
		.delete {
			margin-right: 20rpx;
		}
	}
	.upload {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 92%;
		button {
			height: 80rpx;
			font-size: 32rpx;
			border: none;
			color: #fff;
			background-color: #12ae85;
		}
	}
}
</style>
